<template>
    <!-- 我创建的歌单 -->
    <div class="create-song-sheet">
        <header>我创建的歌单<span>®</span>({{ song_sheet.playlist.length }})</header>
        <ul>
            <li v-for="item in song_sheet.playlist" :key="item.id">
                <div class="img">
                    <img :src="item.coverImgUrl" alt="" />
                    <div class="backgrund">
                        <div class="headset"></div>
                        <span>{{ 0 }}</span>
                        <div class="play"></div>
                    </div>
                </div>
                <p>{{ item.name }}</p>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { getCurrentInstance, toRefs, reactive, onBeforeMount } from "vue";
const axios = getCurrentInstance().proxy.$http;

const props = defineProps({
    userId: Number
})

// 获取创建歌单
const song_sheet = reactive({
    playlist: [],
});
async function createSongSheet() {
    const { data } = await axios(
        `/user/playlist?uid=${props.userId}`
    );
    if (data.code === 200) {
        song_sheet.playlist = data.playlist;
    }
    // 获取歌单详情
    // const song_sheet_detail = await axios.get(`/playlist/detail?id=${song_sheet.playlist[0].id}`);
}

createSongSheet();
</script>

<style lang='less' scoped>
// 我创建的歌单
.create-song-sheet {
    margin-top: 50px;
    header {
        background-color: white;
        border-bottom: 2.5px solid rgb(182, 7, 7);
        height: 40px;
        line-height: 40px;
        color: rgb(49, 49, 49);
        font-weight: 30px;
        font-weight: 700;
        span {
            font-size: 10px;
            vertical-align: top;
            line-height: 35px;
        }
    }
    ul {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        li {
            float: left;
            flex-shrink: 0;
            width: 140px;
            height: 175px;
            box-sizing: border-box;
            margin-top: 20px;
            &:nth-child(n + 2) {
                margin-left: 50px;
            }
            &:nth-child(5n + 6) {
                margin-left: 0px;
            }
            .img {
                position: relative;
                width: 100%;
                height: 140px;
                img {
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                }
                .backgrund {
                    position: absolute;
                    bottom: 0px;
                    z-index: 2;
                    height: 26px;
                    width: 140px;
                    background-color: black;
                    border-top: 1px solid rgb(63, 63, 63);
                    color: rgb(170, 170, 170);
                    display: flex;
                    align-items: center;
                    .headset {
                        width: 14px;
                        height: 11px;
                        background: url("../../../../assets/img/iconall.png") //
                            no-repeat;
                        background-position: 0 -24px;
                        margin: 0px 5px 0px 10px;
                    }
                    span {
                        font-size: 12px;
                    }
                    .play {
                        width: 16px;
                        height: 17px;
                        background: url("../../../../assets/img/iconall.png") //
                            no-repeat;
                        margin-left: auto;
                        margin-right: 10px;
                        cursor: pointer;
                    }
                }
            }
            p {
                font-size: 13px;
                line-height: 0px;
                font-weight: 500;
                margin-top: 12px;
            }
        }
    }
}
</style>